<template>
  
<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
<TodoHeader @addTodoName="add"></TodoHeader>
  <!-- 列表区域 -->
 <TodoMain :list="list" @delList="del"></TodoMain>
  <!-- 统计和清空 -->
  <TodoFooter :list="list" @clearList="clear" v-show="list.length>0"></TodoFooter>
</section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  data(){
    // 要又返回return才能书写数据
      return{
        list: JSON.parse(localStorage.getItem('list')) || [
          {id:1,name:'跑步十公里'},
          {id:3,name:'唱跳'}
        ]   
      }
  },
  // 侦听器   加载到本地
  watch:{
  list:{
    deep:true,
    handler(value){
      localStorage.setItem('list',JSON.stringify(value))
    }

  }
  },
  // 注册 
components:{
  TodoHeader,
  TodoMain,
  TodoFooter
},
// 逻辑
methods:{
  // 带值传过来  要有形参接收
  add(value){
    this.list.unshift({
      id:+new Date(),
      name:value
     })
  },
  // 删除
  del(id){
 this.list=this.list.filter(item=>item.id!==id)
  },
  // 清除
  clear(){
    this.list=[]
  }
}
}
</script>

<style>
</style>